<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-fill";
import { publishCourseDto, publishCourse } from "@/api/lms/course";
import { getOrgList, getUserList } from "@/api/sys/org";
import { useLmsStoreHook } from "@/store/modules/lms";

const lmsStore = useLmsStoreHook();

const publishCourseArgus = ref<publishCourseDto>({
  courseId: "",
  isPublic: false,
  userIds: [],
  orgIds: []
});

const orgTree = ref([]);

const orgUsers = ref([]);
const userMap: Map<string, any> = new Map();
const selectOrgList = ref([]);
const selectUserList = ref([]);

onMounted(() => {
  getOrgList().then(res => {
    orgTree.value = res;
  });
});

const clickAppendIcon = (data: any) => {
  if (!selectOrgList.value.includes(data)) {
    selectOrgList.value.push(data);
  }
};

const loadUsers = (data: any) => {
  getUserList(data.id).then(res => {
    const li = [];
    res.forEach(item => {
      li.push({
        label: item.username,
        value: item.userId
      });
      userMap.set(item.userId, item);
    });
    orgUsers.value = li;
  });
};
const handleOrgTagClose = (tag: any) => {
  selectOrgList.value.splice(selectOrgList.value.indexOf(tag), 1);
};
const handleUserTagClose = (tag: any) => {
  console.log(tag);
  selectUserList.value.splice(selectUserList.value.indexOf(tag), 1);
  selectUserList.value = selectUserList.value.splice(
    selectUserList.value.indexOf(tag),
    1
  );
};

const handleUserchange = ids => {
  console.log(ids);
  console.log(selectUserList.value);
  ids.forEach(id => {
    const u = {
      label: userMap.get(id).username,
      value: userMap.get(id).userId
    };
    if (!selectUserList.value.includes(u)) {
      selectUserList.value.push(u);
    }
  });
  console.log(selectUserList.value);
};
const commitForm = () => {
  if (!publishCourseArgus.value.isPublic) {
    selectOrgList.value.forEach(item => {
      publishCourseArgus.value.orgIds.push(item.id);
    });
    console.log(selectUserList.value);
    selectUserList.value.forEach(item => {
      console.log(item);
      publishCourseArgus.value.userIds.push(item.value);
    });
  }
  publishCourseArgus.value.courseId = lmsStore.currCourseInfoDto.baseInfo.id;
  publishCourse(publishCourseArgus.value).then(() => {
    lmsStore.currCourseInfoDto.users = selectUserList.value;
    lmsStore.currCourseInfoDto.orgs = selectOrgList.value;
    lmsStore.currStep++;
  });
};
defineExpose({
  commitForm
});
</script>

<template>
  <div>
    <el-divider content-position="left">发布范围</el-divider>
    <el-row style="display: flex">
      <el-col :span="11">
        <el-switch v-model="publishCourseArgus.isPublic" />
        <span v-show="publishCourseArgus.isPublic" style="margin-left: 10px"
          >全体用户可用</span
        >
        <span v-show="!publishCourseArgus.isPublic" style="margin-left: 10px"
          >勾选发布范围</span
        >
        <el-row v-if="!publishCourseArgus.isPublic" style="margin-top: 30px">
          <el-col :span="24">
            <el-tree
              :data="orgTree"
              @node-click="loadUsers"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
            >
              <template #default="{ data }">
                <span>
                  <span>{{ data.orgName }}</span>
                  <span class="option-icon-span">
                    <el-link
                      class="option-icon-link"
                      type="primary"
                      :underline="false"
                      @click="clickAppendIcon(data)"
                      :icon="useRenderIcon(AddFill)"
                    />
                  </span>
                </span>
              </template>
            </el-tree>
          </el-col>
        </el-row>
      </el-col>
      <el-divider style="height: 25rem" direction="vertical" />
      <el-col :span="11">
        <div style="height: 180px">
          <div>已选部门</div>
          <div style="overflow-y: auto">
            <span v-show="publishCourseArgus.isPublic"> 所有部门可用</span>
            <div v-show="!publishCourseArgus.isPublic">
              <el-tag
                v-for="item in selectOrgList"
                :key="item.deptId"
                closable
                :disable-transitions="false"
                @close="handleOrgTagClose(item)"
                >{{ item.orgName }}</el-tag
              >
            </div>
          </div>
        </div>
        <el-divider />
        <div style="height: 180px">
          <el-row>
            <el-col :span="11">
              <div style="height: 180px">
                <div v-show="publishCourseArgus.isPublic">全体用户可用</div>
                <div v-show="!publishCourseArgus.isPublic">
                  已选{{ selectUserList.length }}个成员
                </div>
                <div>
                  <el-select
                    :disabled="publishCourseArgus.isPublic"
                    multiple
                    collapse-tags
                    collapse-tags-tooltip
                    placeholder="选择用户"
                    @change="handleUserchange"
                  >
                    <el-option
                      v-for="item in orgUsers"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
            </el-col>
            <el-divider direction="vertical" />
            <el-col :span="11">
              <div v-show="!publishCourseArgus.isPublic">
                <el-tag
                  v-for="item in selectUserList"
                  :key="item.value"
                  closable
                  :disable-transitions="false"
                  @close="handleUserTagClose(item)"
                  >{{ item.label }}</el-tag
                >
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped></style>
